<template>
    <div class="tip-box" :style="'animation-duration:'+time+'s;'">{{msg}}</div>
</template>
<script>
export default {
    data(){
        return{
            msg:"",
            time:3
        }
    },
    mounted(){
        doucment.body.appendChild(this.$el);
    },
    beforeUpdate(){
        setTimeout(()=>{
            document.body.removeChild(this.$el);
            this.$destroy();
        },this.time*1000);
    }
};
</script>
<style scoped>
.tip-box {
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 100%);
    background-color: aquamarine;
    padding: 15px 30px;
    /* opacity: 0; */
    border-radius: 6px;
    animation-name: tipFade;
    animation-iteration-count: 1;
    /* animation-duration: 3s; */
}
@keyframes tipFade {
    0% {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
    15% {
        transform: translate(-50%, 100%);
        opacity: 1;
    }
    85% {
        transform: translate(-50%, 100%);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
}
</style>